<!--三包预警查询 经销商端-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" labelWidth="100" :collapse="true" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      :onSyncTableData="tableChangeFun"
      :isExportExcel="true"
      exportFileName="三包预警查询.xlsx"
      :onCalcExportData="handleExportFun"
      :cellstyles="cellstyles"
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      datakey="records"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary">最后更新时间 {{ nowTime }}</el-button>
      </template>
    </FilterTable>

    <Drawer :visible.sync="visible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detail :vinId="vinId" @close="closeHandler" :handleType="handleType" />
    </Drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import detail from './detail';
import { isEmpty } from '@/utils/utils';
import { getParaList } from '@/api/repair/threePacksOfManager/warningQueryJingxsDuan';
import { arrayObjDeWeight } from '@/utils';
import { dealerMixin } from '@/pages/repair/batchEventManagement/dealerMixin';

export default {
  name: 'index',
  mixins: [dictionary, dealerMixin],
  data() {
    this.BaseTable = null;
    this.conf = { add: '新增', edit: '编辑', show: '显示' };
    return {
      topFilterList: this.createTopFilterList(),
      visible: false,
      fetchApi: getParaList,
      dialogTitle: '',
      fetchParams: { xhrAbort: false },
      columns: this.createTableColumns(),
      handleType: '',
      formData: {},
      vinId: '',
      cellstyles: [],
      nowTime: ''
    };
  },
  components: {
    detail
  },

  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;

    this.nowTime = moment().format('YYYY-MM-DD HH:mm:ss');

    this.getAllModels(this.columns, ['model'], 'table');

    this.getSeries(this.columns, ['series'], 'table');
  },
  methods: {
    // 导出处理函数
    handleExportFun(row) {
      let paraType = isEmpty(row['paraType']) ? 0 : parseFloat(row['paraType']);
      row.paraType = paraType > 0 ? '已预警' : '未预警';
    },

    tableChangeFun(dataList) {
      // dataList.forEach((row, index) =>
      // {
      //
      //   let red = isEmpty(row['red']) ? 0 : parseFloat(row['red']);
      //   let yellow = isEmpty(row['yellow']) ? 0 : parseFloat(row['yellow']);
      //   let orange = isEmpty(row['orange']) ? 0 : parseFloat(row['orange']);
      //   let repairCount = isEmpty(row['repairCount']) ? 0 : parseFloat(row['repairCount']);
      //
      //   let status = ''
      //
      //   let params = {row: row, dataIndex: 'repairCount', styles: {backgroundColor: ''}}
      //
      //   if (repairCount > red)
      //   {
      //     status = '红色预警'
      //     params.styles.backgroundColor = 'red'
      //   } else if (repairCount < red && repairCount > orange)
      //   {
      //     status = '橙色预警'
      //     params.styles.backgroundColor = 'orange'
      //   } else if (repairCount < orange && repairCount > yellow)
      //   {
      //     params.styles.backgroundColor = 'yellow'
      //     status = '黄色预警'
      //   } else
      //   {
      //     params.styles.backgroundColor = ''
      //     status = '未预警'
      //   }
      //   this.cellstyles.push(params)
      //
      // })

      console.log('tableChangeFun---', dataList);
    },

    detailHandle(row) {
      this.vinId = row['vinId'];
      this.handleType = 'show';
      this.showHandler(row);
    },

    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 120,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                  详情
                </el-button>
              </div>
            );
          }
        },

        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '配件代码',
        //   dataIndex: 'partNo',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '配件名称',
        //   dataIndex: 'partName',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户姓名',
          dataIndex: 'ownerName',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '联系电话',
          dataIndex: 'linkTel',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'series',
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: []
        },
        {
          title: '车型',
          dataIndex: 'model',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: []
        },
        // {
        //   title: '车型代码',
        //   dataIndex: 'createBy',
        //   showOverflowTooltip: true,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        {
          title: '行驶里程',
          dataIndex: 'mileage',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          width: 150,
          sorter: true,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          filterType: 'date-range'
        },

        {
          title: '预警级别',
          dataIndex: 'paraType',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            let row = props.row;

            let paraType = isEmpty(row['paraType']) ? 0 : parseFloat(row['paraType']);

            // let red = isEmpty(row['red']) ? 0 : parseFloat(row['red']);
            // let yellow = isEmpty(row['yellow']) ? 0 : parseFloat(row['yellow']);
            // let orange = isEmpty(row['orange']) ? 0 : parseFloat(row['orange']);
            // let repairCount = isEmpty(row['repairCount']) ? 0 : parseFloat(row['repairCount']);
            //
            // let status = ''
            //
            // console.log('red--',red)
            // console.log('repairCount--',repairCount)
            // if (repairCount > red)
            // {
            //   status = '红色预警'
            // } else if (repairCount < red && repairCount > orange)
            // {
            //   status = '橙色预警'
            // } else if (repairCount < orange && repairCount > yellow)
            // {
            //   status = '黄色预警'
            // } else
            // {
            //   status = '未预警'
            // }
            return <div>{paraType > 0 ? '已预警' : '未预警'}</div>;
          }
        }
      ];
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partNo',
          placeholder: '配件代码...'
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'partName',
          placeholder: '配件名称...'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: 'VIN...'
        }
      ];
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    changeHandle(val) {
      // val.bDate=moment(val['bDate']).format('YYYY-MM-DD')
      // val.eDate=moment(val['eDate']).format('YYYY-MM-DD')
      this.fetchParams = Object.assign({}, val);

      console.log(this.fetchParams);
    },
    showHandler(row) {
      let vin = '【' + row['vin'] + '】';
      this.dialogTitle = `车辆${vin}三包预警明细`;

      this.visible = true;
    },

    closeHandler(type) {
      this.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
